<template>
	<view>
		<cu-custom bgColor="bg-gradual-orange-user" :isBack="true">
		    <block slot="content">商家中心</block>
		</cu-custom>
		<view class="container ">
		    <!-- 用户信息区域 -->
		    <view class="user-section position_realtive justify-between">
				<view class="flex align-center">
					<image class="avatar" src="https://img.js.design/assets/img/66e7ec77cf90ad6de232e50d.png#8897541e728f48a3c20441ad78e3915b"></image>
					<view class="user-info text-white">
					  <view class="login-text">巴拉巴拉棋牌室</view>
					  <view class="text-xs padding-tb-xs">电话 | 18854689561</view>
					  <view class="text-xs">位置 | 长沙市岳麓区建设路88号</view>
					</view>
				</view>
			  <view class="text-center">
				  <view class="member_code_tip margin-bottom-xs">商家码</view>
				  <image class="member_code" src="../../static/images/user/qrcode.png"  mode="aspectFit"></image>
			  </view>
			  <!-- 订单快捷入口 -->
			  <view class="order-section">
				<view class="notice flex align-center margin-bottom-sm padding-lr-lg">
					<image  class="notice_img"  src="../../static/images/user/notice.png" mode="aspectFill"></image>
					<view class="notice_text pad">张***豪华麻将房组局成功，请预留房间~</view>
				</view>
				<view class="flex justify-between align-center padding-lr-lg">
					<view class="order-item" v-for="(item, index) in orders" :key="index">
					  <image class="icon" :src="item.icon" mode="aspectFill" ></image>
					  <text>{{ item.text }}</text>
					</view>
				</view>
				<view class="divider"></view>
			    <view class="data_detail margin-lr-lg text-white flex align-center justify-between">
					<view>
						<view class="margin-bottom-sm">今日组局人数：30人</view>
						<view>今日入群人数：100人</view>
					</view>
					<view class="view_detail">查看详情</view>
				</view>
				<view class="margin-top-lg flex justify-between views padding-lr-lg">
					<view>
						<view>累计组局人数：</view>
						<view>累计入群人数：</view>
					</view>
					<view>
						<view>30人</view>
						<view>100人</view>
					</view>
				</view>
			  </view>
		    </view>
		    
		   
		    
		    <!-- Banner -->
			<view style="padding: 0 26rpx;">
				<image class="banner" src="https://img.js.design/assets/img/62be98752fd1b428331c22a6.png" ></image>
			</view>
		    
		    
		    <!-- 我的服务 九宫格 -->
		    <view class="service-grid">
		      <navigator :url="service.src" class="service-item" v-for="(service, index) in services" :key="index">
		        <image class="icon" :src="service.icon"></image>
		        <text>{{ service.text }}</text>
		      </navigator>
		    </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 orders: [
					{ icon: '/static/images/user/o1.png', text: '待成局' },
					{ icon: '/static/images/user/o2.png', text: '待开局' },
					{ icon: '/static/images/user/o3.png', text: '待评价' },
					{ icon: '/static/images/user/o4.png', text: '售后反馈' },
					{ icon: '/static/images/user/o5.png', text: '全部订单' },
				  ],
				  services: [
					{ icon: '/static/images/user/kzgl.png',  src:'/pages/merchant/center',text: '卡座管理' },
					{ icon: '/static/images/user/qlgl.png', src:'pages/merchant/center',text: '群聊管理' },
					{ icon: '/static/images/user/sjgl.png', src:'/pages/merchant/center', text: '商家信息' },
					{ icon: '/static/images/user/yhgl.png',src:'pages/merchant/center', text: '用户管理' }
				  ]
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped>
.container {
  
}
.user-section {
  display: flex;
  align-items: center;
  background:  linear-gradient(225.19deg, rgba(254, 94, 41, 1) 0%, rgba(254, 118, 4, 1) 100%);
  padding: 30rpx;
  padding-bottom: 250rpx;
   border-bottom-left-radius: 50% 50rpx;  /* 左下角圆弧 */
    border-bottom-right-radius: 50% 50rpx; /* 右下角圆弧 */
}
.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}
.user-info {
  display: flex;
  flex-direction: column;
}
.login-text {
  font-size: 36rpx;
  color: white;
}
.vip-icon {
  width: 50rpx;
  height: 50rpx;
}
.order-section {

	border-radius: 20rpx;
	background: white;
	padding: 40rpx 0;
	position: absolute;
	top: 200rpx;
	left: 26rpx;  /* 左侧间距 */
	right: 26rpx; /* 右侧间距 */
  
}
.order-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 20rpx;
}
.banner {
	width: 100%;
  height: 220rpx;
  border-radius: 22rpx;
  margin-top: 430rpx;
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 52rpx 0;
  margin: 0 26rpx;
  margin-top: 30rpx;
}
.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
 
}
.member_code_tip{
	background: rgba(254, 217, 164, 1);
	color: rgba(165, 110, 51, 1);
	font-size: 16rpx;
	padding: 10rpx 18rpx;
	border-radius: 40rpx;
	position: relative;
	margin-bottom: 20rpx;
}
.member_code_tip::after {
  content: "";
  position: absolute;
  bottom: -10rpx; /* 控制三角形位置 */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10rpx solid transparent;
  border-right: 10rpx solid transparent;
  border-top: 10rpx solid rgba(254, 217, 164, 1); /* 设置三角形颜色 */
}
.member_code{
	width: 40rpx;
	height: 40rpx;
}
.title{
	color: rgba(51, 51, 51, 1);
	font-size: 28rpx;
	margin: 26rpx;
}
.notice_img {
	width: 32rpx;
	height: 32rpx;
	margin-right: 10rpx;
}
.notice_text{
	color:  rgba(0, 0, 0, 1);
	font-size: 18rpx;
}
.divider{
	width: 100%;
	border: 2rpx solid rgba(229, 229, 229, 1);
	margin-top: 32rpx;
}
.data_detail{
	border-radius: 8rpx;
	background: rgba(254, 116, 7, 1);
	padding: 40rpx 55rpx;
	margin-top: 24rpx;
	font-size: 18rpx;
}
.view_detail{
	border: 1px solid rgba(255, 255, 255, 1);
	border-radius: 40rpx;
	padding: 10rpx 15rpx;
	font-size: 20rpx;
}
.views{
	font-size: 24rpx;
	color: rgba(56, 56, 56, 1);
	line-height: 2.0;
}
</style>
